<template>
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>
      <div class="spaceBetween">
        <!-- NavMenu导航菜单 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">所有订单</el-menu-item>
          <el-menu-item index="2">待支付</el-menu-item>
          <el-menu-item index="3">已支付</el-menu-item>
        </el-menu>
        <!-- 搜索框+删除 -->
        <div style="display: flex;" class="searchaddel">
          <!-- 搜索框 -->
          <el-form inline class="search">
            <el-form-item>
              <div style="display:flex; justify-content:space-between;">
                <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入订单号/名称/手机号">
                </el-input>
                <el-button :loading="loading" type="primary" style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);border-radius: 3px;"
                  @click="getTableList" icon="el-icon-search">
                  搜索</el-button>
              </div>
            </el-form-item>
          </el-form>
          <!-- 搜索框 -->
          <!-- 删除按钮 -->
          <el-button type="info" class="delete">删除</el-button>
          <!-- 删除按钮 -->
        </div>
        <!-- 搜索框+删除 -->
        <div class="line"></div>
        <!-- NavMenu导航菜单 -->
      </div>

      <!-- <el-form inline>
        <el-form-item>
          <div style="display:flex; justify-content:space-between;">
            <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入订单号/物流号/名称/手机号">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="listPram.date" type="datetimerange" :picker-options="constants.pickerOptions" 
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '00:00:00']" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="承运方"  @change="getTableList">
            <el-option label="承运方" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="支付状态"  @change="getTableList">
            <el-option label="支付状态" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="支付方式"  @change="getTableList">
            <el-option label="支付方式" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="支付渠道"  @change="getTableList">
            <el-option label="支付渠道" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="订单状态"  @change="getTableList">
            <el-option label="订单状态" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px;" v-model="listPram.isDel" placeholder="回单状态"  @change="getTableList">
            <el-option label="回单状态" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button :loading="loading" type="primary"
              style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);"
              @click="getTableList">搜索</el-button>
        </el-form-item>
      </el-form> -->

      <!-- 表格 -->
        <el-table
          ref="tableData" 
          v-loading="loading" 
          :data="listData.list" 
          highlight-current-row
          :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
          style="width:100%"
          :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }"
          class="table"
        >
        <el-table-column align=center label="下单时间" prop="ordertime" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="物流单" prop="note" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="发件人" prop="addresser" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="收件人" prop="receive" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="费用" prop="bill" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="支付状态" prop="payment" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="订单状态" prop="orderstate" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="签收时间" prop="receiptime" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- <el-table ref="tableData" v-loading="loading" :data="listData.list" highlight-current-row
        :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
        :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }">
        <el-table-column label="序号" type="index" width="50px"></el-table-column>
        <el-table-column label="下单时间" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单号" prop="name" show-overflow-tooltip ></el-table-column>
        <el-table-column label="承运方" prop="name" show-overflow-tooltip ></el-table-column>
        <el-table-column label="快递号" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="发件人" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="电话" prop="name" show-overflow-tooltip ></el-table-column>
        <el-table-column label="收件人" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="电话" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="费用" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="支付方式" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="支付状态" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单状态" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="签收时间" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="回单状态" prop="name" show-overflow-tooltip></el-table-column>
      </el-table> -->
      <!-- 分页 -->
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import detail from './detail.vue'    //明细
export default {
  name: "OrderIndex",
  data() {
    return {
      // NavMenu导航菜单默认在第一个-所有订单
      activeIndex: '1',
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      // listData: { list: [{ name: '静态页面' }] },
      listData: {
        list:[
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            orderstate: '已签收',
            receiptime: '2022-10-25 17:25:12',
          },
        ]
      },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      //多选
      menuList: [],
      loading: false,
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    }
  }
}
</script>

<style scoped>
.line{
  margin-bottom: 8px;
}
.el-icon-search{
  font-size: normal;
}
.delete{
  width: 72px;
  height: 32px;
  opacity: 1;
  border: none;
  border-radius: 3px;
  background: rgba(184, 184, 184, 1);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  /* line-height: 32px; */
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  vertical-align: top; 
}
.searchaddel{
  justify-content: space-between;
}
.search{
  left: 262px;
  top: 235px;
  width: 360px;
  height: 32px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 1);
  /* border: 1px solid rgba(217, 217, 217, 1); */
}
.table{
  margin-top: 8px;
}
el-table-column{
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  text-align: left;
  vertical-align: middle;
}
.flex{
  display: flex;
}
</style>
